<script setup lang="ts">
import { DataField } from '@formily/core';
import { Field, useField } from '@formily/vue';
import { usePrefix } from '@season-designable/vue';
import { Select, Input } from '@formily/element-plus';
import ColorInput from '../ColorInput/index.vue';
import FoldItem from '../FoldItem/index.vue';
import InputItems from '../InputItems/InputItems.vue';
import InputItem from '../InputItems/InputItem.vue';
import BackgroundImageInput from '../ImageInput/BackgroundImageInput.vue';
import BackgroundSizeInput from '../SizeInput/BackgroundSizeInput.vue';
import { GlobalRegistry } from '@season-designable/core';

const field = useField<DataField>();
const prefix = usePrefix('background-style-setter');
</script>

<template>
  <FoldItem :class="prefix" :label="field.title">
    <template #base>
      <Field
        name="backgroundColor"
        :basePath="field.address.parent()"
        :component="[ColorInput]"
      />
    </template>

    <template #extra>
      <InputItems>
        <InputItem
          icon="mdi:file-image"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Image')"
        >
          <Field
            name="backgroundImage"
            :basePath="field.address.parent()"
            :component="[BackgroundImageInput]"
        /></InputItem>

        <InputItem
          icon="mdi:image-size-select-large"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.ImageSize')"
        >
          <Field
            name="backgroundSize"
            :basePath="field.address.parent()"
            :component="[BackgroundSizeInput]"
        /></InputItem>

        <InputItem
          icon="mdi:content-copy"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Repeat')"
        >
          <Field
            name="backgroundRepeat"
            :basePath="field.address.parent()"
            :component="[
              Select,
              {
                style: { width: '100%' },
                placeholder: 'Repeat',
                teleported: false,
                clearable: true,
              },
            ]"
            :dataSource="[
              {
                label: 'No Repeat',
                value: 'no-repeat',
              },
              {
                label: 'Repeat',
                value: 'repeat',
              },
              {
                label: 'Repeat X',
                value: 'repeat-x',
              },
              {
                label: 'Repeat Y',
                value: 'repeat-y',
              },
              {
                label: 'Space',
                value: 'space',
              },
              {
                label: 'Round',
                value: 'round',
              },
            ]"
        /></InputItem>

        <InputItem
          icon="mdi:map-marker"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.Position')"
        >
          <Field
            name="backgroundPosition"
            :basePath="field.address.parent()"
            :component="[
              Input,
              {
                placeholder: 'center center',
              },
            ]"
        /></InputItem>
      </InputItems>
    </template>
  </FoldItem>
</template>

<style lang="scss" scoped></style>
